<!DOCTYPE html>
<html>
<head>
    <title>Radioactive Decay Chain</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="decayChainCanvas" width="850" height="300"></canvas>
    <script>
        const canvas = document.getElementById('decayChainCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.textAlign = 'center';
        
        // --- Dimensions and Positions ---
        const boxWidth = 160;
        const boxHeight = 60;
        const arrowLength = 120;
        const startX = 50;
        const yPos = 120; // Vertical position for the center line of the diagram

        const boxY = yPos - boxHeight / 2;
        const arrowY = yPos;

        // --- Helper function to draw an arrow ---
        function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 15) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            // Arrowhead
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- 1. Draw Boxes ---
        const boxPx = startX;
        const boxDx = boxPx + boxWidth + arrowLength;
        const boxSx = boxDx + boxWidth + arrowLength;

        ctx.strokeRect(boxPx, boxY, boxWidth, boxHeight);
        ctx.strokeRect(boxDx, boxY, boxWidth, boxHeight);
        ctx.strokeRect(boxSx, boxY, boxWidth, boxHeight);

        // --- 2. Draw Text inside Boxes ---
        ctx.font = '24px Arial';
        ctx.textBaseline = 'middle';
        ctx.fillText('nuclide P', boxPx + boxWidth / 2, yPos);
        ctx.fillText('nuclide D', boxDx + boxWidth / 2, yPos);
        ctx.fillText('nuclide S', boxSx + boxWidth / 2, yPos);

        // --- 3. Draw Arrows ---
        const arrow1_startX = boxPx + boxWidth;
        const arrow1_endX = boxDx;
        drawArrow(ctx, arrow1_startX, arrowY, arrow1_endX, arrowY);

        const arrow2_startX = boxDx + boxWidth;
        const arrow2_endX = boxSx;
        drawArrow(ctx, arrow2_startX, arrowY, arrow2_endX, arrowY);

        // --- 4. Draw Labels above Arrows ---
        // Label 1: P -> D
        const label1_x = arrow1_startX + arrowLength / 2;
        const decayConst_y = yPos - 55;
        const lambda_y = yPos - 25;

        ctx.font = '24px Arial';
        ctx.textBaseline = 'bottom';
        ctx.fillText('decay constant', label1_x, decayConst_y);
        
        // Draw λ_P
        ctx.font = '28px Arial'; // Lambda symbol
        const lambda_width = ctx.measureText('λ').width;
        ctx.textBaseline = 'middle';
        ctx.fillText('λ', label1_x - lambda_width / 4, lambda_y);
        ctx.font = '20px Arial'; // Subscript
        ctx.fillText('P', label1_x + lambda_width / 2, lambda_y + 6);

        // Label 2: D -> S
        const label2_x = arrow2_startX + arrowLength / 2;
        ctx.font = '24px Arial';
        ctx.textBaseline = 'bottom';
        ctx.fillText('decay constant', label2_x, decayConst_y);
        
        // Draw λ_D
        ctx.font = '28px Arial'; // Lambda symbol
        ctx.textBaseline = 'middle';
        ctx.fillText('λ', label2_x - lambda_width / 4, lambda_y);
        ctx.font = '20px Arial'; // Subscript
        ctx.fillText('D', label2_x + lambda_width / 2, lambda_y + 6);
        
        // --- 5. Draw Figure Caption ---
        ctx.font = 'bold 24px Arial';
        ctx.textBaseline = 'top';
        const captionX = boxDx + boxWidth / 2;
        const captionY = boxY + boxHeight + 50;
        ctx.fillText('Fig. 12.1', captionX, captionY);
    </script>
</body>
</html>